<template>
    <form method="post">
        <div style="width: 100%">
            <div style="width: 5px; height: 100%; float: left; background-color: #356cb3"><font style="font-size: 30px">&nbsp;</font></div>
            <div style="width: 50%; height: 100%; float: left">
                <font style="font-size: 25px; font-family: 微软雅黑">用户注册</font>
            </div>
        </div>
        <!-- <el-divider class="divider_top"></el-divider> -->
        <div>
            <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="200px" class="demo-ruleForm">
                <br />
                <br />
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="姓名" prop="userName">
                            <el-input v-model="ruleForm.userName" style="width: 90%"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="拼音" prop="pinYin">
                            <el-input v-model="ruleForm.pinYin" style="width: 90%"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="密码" prop="passWord">
                            <el-input v-model="ruleForm.passWord" show-password style="width: 90%"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="性别" prop="sex">
                            <el-radio-group v-model="ruleForm.sex">
                                <el-radio label="1" value="1">男</el-radio>
                                <el-radio label="2" value="2">女</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="所属单位" prop="unit">
                            <el-input v-model="ruleForm.unit" placeholder="" style="width: 90%"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="岗位" prop="job">
                            <el-input v-model="ruleForm.job" placeholder="" style="width: 90%"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="职务" prop="position">
                            <el-input v-model="ruleForm.position" placeholder="" style="width: 90%"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="职称" prop="jobTitle">
                            <el-input v-model="ruleForm.jobTitle" placeholder="" style="width: 90%"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="邮箱" prop="email">
                            <el-input v-model="ruleForm.email" placeholder="" style="width: 90%"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="用户状态" prop="status">
                               <el-radio-group v-model="ruleForm.status" placeholder="" style="width: 90%">
                                <el-radio label="1" value="1">启用</el-radio>
                                <el-radio label="2" value="2">禁用</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="手机号码" prop="phone">
                            <el-input v-model="ruleForm.phone" placeholder="" style="width: 90%"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="人员类型" >
                                <el-radio label="1" value="1" v-model="ruleForm.personType">在职</el-radio>
                                <el-radio label="2" value="2" v-model="ruleForm.personType">离职</el-radio>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="启用日期" prop="startTime">
                            <el-date-picker
                                type="date"
                                placeholder="选择日期"
                                v-model="ruleForm.startTime"
                                style="width: 90%"
                            ></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="停用日期" prop="endTime">
                            <el-date-picker
                                type="date"
                                placeholder="选择日期"
                                v-model="ruleForm.endTime"
                                style="width: 90%"
                            ></el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="排序号" prop="serialNumber">
                            <el-input v-model="ruleForm.serialNumber" placeholder="" style="width: 90%"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="备注" prop="remark">
                            <el-input v-model="ruleForm.remark" placeholder="" style="width: 90%"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <br />
                <el-row>
                    <el-col :span="24" style="text-align: center">
                        <el-button @click="saveOrUpdate()" class="bthNormal">保存</el-button>
                        <el-button @click="shutdown()" class="bthNormal">关闭</el-button>
                    </el-col>
                </el-row>
            </el-form>
        </div>
    </form>
</template>

<script>
import label from '@/api/sys/user';
export default {
    data() {
        var checkNum = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('数字不能为空'));
            }
            if (isNaN(value)) {
                return callback(new Error('请输入数字值'));
            }
            callback();
        };
        return {
            ruleForm: {
                userName: '',
                pinYin: '',
                passWord: 'password',
                sex: '',
                unit: '',
                job: '',
                position: '',
                jobTitle: '',
                email: '',
                status: '',
                phone: '',
                personType: '',
                startTime: '',
                endTime: '',
                serialNumber: '',
                remark: ''
            },
            rules: {
                // xmname: [
                //     { required: true, message: '请输入项目名称', trigger: 'blur' }
                //     // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                // ],

                userName: [{ required: true, message: '请填写姓名', trigger: 'change' }],
                pinYin: [{ required: true, message: '请填写拼音', trigger: 'change' }],
                passWord: [{ required: true, message: '请填写密码', trigger: 'change' }],
                serialNumber: [{ validator: checkNum, trigger: 'change' }]
            }
        };
    },
    created() {
        this.init();
    },
    watch: {
        //监听
        $route(to, from) {
            //路由变化方式，路由发生变化，方法就会执行
            this.init();
        }
    },
    methods: {
        init() {
            //判断路径有id值,做修改
            if (this.$route.query && this.$route.query.id) {
                //从路径获取id值
                const id = this.$route.query.id;
                //调用根据id查询的方法
                this.getInfo(id);
            } else {
                //路径没有id值，做添加
                //清空表单
                this.ruleForm = {};
            }
        },
        saveOrUpdate() {
            //判断修改还是添加
            //根据teacher是否有id
            if (!this.ruleForm.id) {
                //添加
                this.onSubmit();
            } else {
                alert('sss');
                //修改
                this.update();
            }
        },
        onSubmit() {
            label.save(this.ruleForm).then((Response) => {
                this.$message({
                    type: 'success',
                    message: '添加成功!'
                });
            });
        },
        tonew() {
            this.ruleForm = {};
        },
        shutdown() {
            window.close();
        },
        getInfo(id) {
            label.openInfo(id).then((response) => {
                this.ruleForm = response.data;
            });
        },
        update() {
            label.updateInfo(this.$route.query.id, this.ruleForm).then((response) => {
                this.$message({
                    type: 'success',
                    message: '修改成功!'
                });
            });
        }
    }
};
</script>
<style>
.divider_top {
    margin: 0 0 0 0;
    background: 0 0;
    border-top: 1px solid #e6ebf5;
}
</style>